<template>
	<public-view navType="other" navTitle="分销中心">
		<view class="content-share">
			<view class="user-info-box flex">
				<image class="avatar" :src="userInfo?.avatar || '@/static/logo.png'" mode=""></image>
				<view class="user-name-text flex f-d-c">
					<view class="name-box flex a-i-c">
						<view class="f-s-28 name-text l-h-40">
							{{ userInfo?.nickname || ''}}
						</view>
						<view class="f-s-24 l-h-32" style="color: #3A69AE;">
							{{ distributor_data?.distributor_live?.name || ''}}
						</view>
					</view>
					<view class="f-s-24 l-h-30" style="color: #9F9F9F;margin-bottom: 18upx;">
						推荐人：{{ distributor_data?.parent?.nickname || ''}}
					</view>
					<view class="f-s-24 l-h-30" style="color: #9F9F9F;">
						推荐人ID: {{ distributor_data?.parent?.no || ''}}
					</view>
				</view>
				<view class="rechange-money-btn all-center color-fff f-s-26" @click="goTo({url:'/pages/live/config/rechangeMoneyLive'})">
					提现
				</view>
			</view>
			<view class="all-money-box flex j-c-b a-i-c">
				<view class="item flex f-d-c j-c-b a-i-c">
					<view class="top">
						<view class="f-s-40 f-w-b" style="color: #EE5600;">
							<text class="f-s-22">￥</text>{{ distributor_data?.unsettled_kickback||'0.00' }}
						</view>
					</view>
					<view class="bottom f-s-24" style="color: #475E8B;">
						未结算佣金
					</view>
				</view>
				<view class="item flex f-d-c j-c-b a-i-c">
					<view class="top">
						<view class="f-s-40 f-w-b">
							<text class="f-s-22">￥</text>{{ distributor_data?.balance_kickback||'0.00' }}
						</view>
					</view>
					<view class="bottom f-s-24" style="color: #475E8B;">
						可提现佣金
					</view>
				</view>
				<view class="item flex f-d-c j-c-b a-i-c">
					<view class="top">
						<view class="f-s-40 f-w-b" style="color: #2567F3;">
							<text class="f-s-22">￥</text>{{ distributor_data?.withdrawn_kickback||'0.00' }}
						</view>
					</view>
					<view class="bottom f-s-24" style="color: #475E8B;">
						已提现佣金
					</view>
				</view>
			</view>
			<view class="share-next-btn-box flex a-i-c j-c-b" @click="goTo({url:'/pages/live/config/myTeams'})">
				<view class="f-s-30">
					分销佣金
				</view>
				<view class="f-s-26 flex a-i-c" style="color: #494949;">
					<text style="margin-right: 22rpx;">查看我的团队</text><image class="money-next" src="@/static/images/next-icon3.svg" mode=""></image>
				</view>
			</view>
			<view class="share-list-box flex f-d-c">
				<view class="item flex j-c-b a-i-c" v-for="(item, index) in money_log" :key="index">
					<view class="left flex f-d-c j-c-b">
						<view class="f-s-28" style="color: #3D3D3D;" v-if="!item.order_id">
							{{ item.memo || '' }}
						</view>
						<view class="f-s-28" style="color: #3D3D3D;" v-else>
							 购车佣金<text class="f-s-24" style="color: #878787;margin-left: 22rpx;">订单号：189478346856</text>
						</view>
						<view class="f-s-24" style="color: #878787;">
							到账时间：{{ item.createtime || '' }}
						</view>
					</view>
					<view class="f-s-48 f-w-b" :style="{color: (!item.order_id?'#EE9D00':'#F32E2E')}">
						{{ item.money || '' }}
					</view>
				</view>
				<!-- <view class="item flex j-c-b a-i-c">
					<view class="left flex f-d-c j-c-b">
						<view class="f-s-28" style="color: #3D3D3D;">
							 购车佣金<text class="f-s-24" style="color: #878787;margin-left: 22rpx;">订单号：189478346856</text>
						</view>
						<view class="f-s-24" style="color: #878787;">
							到账时间：2022-10-17 10:47:29
						</view>
					</view>
					<view class="f-s-48 f-w-b" style="color: #F32E2E;">
						¥200
					</view>
				</view> -->
			</view>
		</view>
	</public-view>
</template>

<script>
	import {
		mapGetters
	} from "vuex"
	import {goTo} from "@/nav.js"
	export default {
		data() {
			return {
				distributor_data:{
					distributor_live:'',
					parent:{},
					unsettled_kickback: '0.00',
					balance_kickback: '0.00',
					withdrawn_kickback: '0.00'
				},
				money_log: [

				],
				page:1,
			}
		},
		computed: {
			...mapGetters(["userInfo"])
		},
		onLoad(options) {
			if (options.parent_id) {
				//请求接口绑定上级
				let parent_id = options.parent_id
				this.buildParent(parent_id)
				options.parent_id = null
				delete options.parent_id
			}
		},
		onShow() {
			this.getShareIndex()
			this.getMoneyLog()
		},
		onReachBottom() {
			this.page++
			this.getMoneyLog()
		},
		methods: {
			goTo,
			getMoneyLog() {
				let that = this
				this.util.postRequest({
					url:"v1/distributor/money_log",
					data: {
						rows:10,
						page:that.page
					}
				}).then(res => {
					if(that.page === 1){
						that.money_log = res.data.data
					}else{
						if(res.data.data.length>0){
							that.money_log = that.money_log.concat(res.data.data)
						}else{
							// that.page--
						}
					}
				})
			},
			getShareIndex() {
				let that = this
				this.util.postRequest({
					url:"v1/distributor/index"
				}).then(res => {
					that.distributor_data = res.data
				})
			},
			buildParent(parent_id) {
				this.util.postRequest({
					url:"v1/distributor/build",
					data: {parent_id: parent_id}
				}).then(res => {
					uni.showToast({
						icon:'none',
						title:res.msg
					})
					this.getShareIndex()
				}).catch(err => {
					uni.showToast({
						icon:'none',
						title:err.msg
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.share-list-box{
		width: 100%;
		.item{
			width: 100%;
			padding: 36upx 54upx;
			height: 176upx;
			border-bottom: 2upx solid #E6E6E6;
			.left{
				height: 100%;
			}
		}
	}
	.share-next-btn-box{
		width: 100%;
		padding: 50upx;
		.money-next{
			width: 52upx;
			height: 52upx;
		}
	}
	.all-money-box{
		width: 100%;
		background: #CDDEFF;
		border-radius: 16upx;
		height: 198upx;
		padding: 34upx 40upx;
		.item{
			height: 100%;
		}
	}
	.user-info-box{
		width: 100%;
		position: relative;
		margin-bottom: 46upx;
		.rechange-money-btn{
			position: absolute;
			right: 0;
			bottom: 0;
			width: 148upx;
			height: 60upx;
			background: #2567F3;
			border-radius: 112upx;
			z-index: 2;
		}
		.user-name-text{
			.name-box{
				margin-bottom: 24upx;
				.name-text{
					margin-right: 42upx;
				}
			}
		}
		.avatar{
			width: 140upx;
			height: 140upx;
			margin-right: 36upx;
			border-radius: 50%;
		}
	}
	.content-share{
		width: 100%;
		padding: 30upx 24upx;
	}
</style>
